<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1798038_vix4f9bz06q.css">
    <style>
        #over{
            width: 380px;height:40px;
            background-color: red;display:flex;
        }
        #over-one{
            text-align: center;line-height:40px;
            width: 45px;height:40px;
        }
        #over-two{
            width: 270px;height:30px;background-color: #fff;margin-top:5px;
            border-radius: 45px;border:none;outline:none;
        }
        #over-two-o{
            width: 30px;height:30px;line-height:30px;margin-left: 10px;color:red;font-weight: bold;
        }
        #over-two-one{
            width: 25px;height:30px;line-height:30px;margin-left: 5px;
        }
        #over-two-two{float: right;margin-top:1px;margin-right:10px;
            width: 195px;height:25px;border:none;outline:none;font-size:14px;
        }
        #over-three{
            background-color: red;border:none;font-size: 16px;
            width: 65px;height:40px;text-align: center;
            line-height:40px;color:#fff;outline:none;
        }
        .icon-gengduo{
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="over">
        <div id="over-one">
            <i class="iconfont icon-gengduo"></i>
        </div>
        <div id="over-two">
            <label id="over-two-o">JD</label>
            <label id="over-two-one"><i class="iconfont icon-sousuo"></i></label>
            <input id="over-two-two" type="text" placeholder="请输入搜索内容"/>
        </div>       
        <button id="over-three">
            登录
        </button>
    </div>
</body>
</html>